<%inherit file="base.html"/>
<%def name="head()">
<link href="/static/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css"/>
<script src="/static/js/bootstrap-multiselect.js"></script>
<script>
$(document).ready(function (){
    $("#checkAll").click(function() {  
        $("input[name='rule_item']:checkbox").each(function() { 
            $(this).prop("checked", true);  
            $(".sloop").prop("checked", true);
        })    
    }); 
    //取消全选   
    $("#delCheckAll").click(function() {  
        $("input[name='rule_item']:checkbox").each(function() { 
            $(this).prop("checked",false);  
            $(".sloop").prop("checked", false);
        })  
    });
    $("select[multiple='multiple']").multiselect({
      buttonWidth: "100%",
      includeSelectAllOption: true,
      enableCaseInsensitiveFiltering: true,
      maxHeight: 320
    });    
});

function doSelect(sid){
    $("."+sid).each(function () {
        if($("#"+sid).is(':checked')){
            $(this).prop("checked", true);
        }else{
            $(this).prop("checked", false);
        }

    })
}
</script>
</%def>
<%def name="body()">
<section class="content">
    <div class="box box-default">
        <div class="box-header">
            <i class="fa fa-user-secret"></i>
            <h3 class="box-title">${form.title}</h3>
            <div class="bar pull-right"><a href="javascript:history.go(-1);">返回</a></div>
        </div>
        <div class="box-body">
            <div class="container">
            % if msg:
            <div class="alert alert-warning">${msg}</div>
            % endif
            <form class="form-horizontal form-well" role="form" action="${form.action}" method="post">
            ${xsrf_form_html()}
            ${form.render_css()}
            
            <div class="btn-group" role="group" aria-label="...">
              <button id="checkAll" type="button" class="btn btn-default">全部选择</button>
              <button id="delCheckAll" type="button" class="btn btn-default">取消选择</button>
            </div>
              <hr>
              

              % for menu in all_menus:
              <div class="panel">
                <div class="box-header">
                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> 
                    ${menu['category']} &nbsp;
                    <input type="checkbox" value="" class="sloop" id="s-${loop.index}" onclick="doSelect('s-${loop.index}')">
                    <%  sloop = loop.index  %></div>
                <!-- List group -->
                <ul class="list-group">
                    <div class="container-fluid">
                  % for item in sorted(menu['items'],key=lambda r:r['order']):
                  % if permit.check_open(item['path']):
                  <div class='row col-md-3'>
                      <li class="list-group-item ">
                          <!-- <font color="gray">${loop.index}&nbsp;</font> -->
                          <label>
                          <input type="checkbox" class="s-${sloop}"
                          id="rule_item" 
                          name="rule_item" 
                          value="${item['path']}" ${item['path'] in rules and 'checked' or ''}>  
                           &nbsp;${item['name']}
                         </label>
                      </li>
                    </div>
                  % endif
                  % endfor
                  </div>
                </ul>
              </div>
               % endfor

        </form>
 </div>
    </div>
</div>
    </section>
</%def>